<template>
    <div class="page_wrap">
        <ul class="technician_list clear_fix">
            <template v-for="(item,index) in roleList">
                <li :class="{'danger_bg':item.state==1,'normal_bg':item.state==2,'primary_bg':item.state==3,'checked':currentIndex == index}" @click="currentIndex=index;currentItem=item">
                    <h2>技师编号：{{item.roleNo}}</h2>
                    <p>技师名：{{item.roleName}}</p>
                    <p>房间号：{{item.roleNo}}</p>
                    <p>下钟时间:{{item.lastOpTime.time | formatDateFil}}</p>
                    <button :class="{'current':item.state==1}" @click="updateState(item,2,item.state==1)">下钟</button>
                    <button :class="{'current':item.state==2}" @click="updateState(item,1,item.state==2)">上钟</button>
                    <button :class="{'current':item.state==2}" @click="updateState(item,3,item.state==2)">休息</button>
                    <button :class="{'current':item.state==3}" @click="updateState(item,2,item.state==3)">上班</button>
                </li>
            </template>
        </ul>
        <div class="technicianDetail clear_fix" v-if="currentItem">
            <h2>技师编号：{{currentItem.roleNo}}</h2>
            <p>技师名称：{{currentItem.roleName}}</p>
            <p>技师编号：{{currentItem.roleNo}}</p>
            <p>下钟时间：{{currentItem.lastOpTime.time | formatDateFil}}</p>
            <p>工作状态：{{currentItem.state | setStateType}}</p>
        </div>
    </div>
</template>
<style>
    .page_wrap{
        position:relative;
    }

    .technician_list{
        margin:20px 0 200px;
        display:flex;
        flex-wrap:wrap;
        overflow-y:auto;
        overflow-x:hidden;
        padding:0;
    }

    .technician_list li{
        list-style:none;
        width:240px;
        margin:10px;
        padding:10px;
        color:#FFFFFF;
        border-radius:4px;
        cursor:pointer;
        border:2px solid transparent;
    }

    .technician_list h2{
        margin:0;
        font-weight:normal;
        font-size:16px;
    }

    .technician_list p{
        margin:0;
        line-height:1.5;
        font-size:14px;
    }

    .technician_list button{
        display:inline-block;
        border:0;
        background:#EEEEEE;
        color:#999999;
        border-radius:2px;
        cursor:pointer;
        margin:5px 0 0 0;
        padding:0 8px;
    }

    .technician_list .current{
        color:#000000;
    }

    .danger_bg{
        background:#FF5722;
    }

    .normal_bg{
        background:#1E9FFF;
    }

    .primary_bg{
        background:#009688;
    }

    .technician_list .checked{
        border:2px solid rgba(0, 0, 0, 0.5);
        box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5);
    }

    .technicianDetail{
        position:fixed;
        bottom:0;
        box-shadow:0 -2px 0 rgba(0, 0, 0, 0.5);
        background:#FFFFFF;
        left:230px;
        right:0;
        line-height:2;
        padding:10px 20px;
    }
</style>
<script>
	import {mapGetters,mapActions} from 'vuex'
	import {sendRequest} from '../../api/api'
	import util from '../../common/js/util'
	var roleInterVal
	export default {
		data(){
			return {
				currentIndex:- 1,
				roleList:[],
				currentItem:false,
			}
		},
		beforeMount(){
			this.getRoleList();
			//定时刷新获取数据
			roleInterVal =  setInterval(this.getRoleList,500);
		},
		created(){
			//页面刚进入时开启长连接
			this.initWebSocket()
		},
        destroyed(){
			//页面销毁时关闭长连接
			util.webSocketAPI.close();
			//关闭定时器
			clearInterval(roleInterVal);
        },
		computed:{
			// 使用对象展开运算符将 getters 混入 computed 对象中
			...mapGetters([
				'getCount'
				// ...
			]),
		},
		methods:{
			...mapActions([
				'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
				'decrement'
			]),
			initWebSocket(){ //初始化weosocket 
                var wsUrl = 'page5';
				util.webSocketAPI.create(this.webSocketOnMessage,wsUrl);
			},
			webSocketOnMessage(e){ //数据接收 
				/*var i;
				const resData = JSON.parse(e.data);
				const roleList = this.roleList;
				if(resData.roleNo){
					for(i=0;i<roleList.length;i++){
						if(roleList[i].roleNo == resData.roleNo){
							roleList[i].state = resData.state;
							break;
						}
					}
					this.roleList = roleList;
				}else{
					console.log(resData.msg);
				}*/
			},
			webSocketSend(rolesInfo,state,flag){//数据发送 
				var param;
				if(flag){
					param = {'rolesInfo':rolesInfo,'state':state,'channel':'page5'};
					util.webSocketAPI.sendMessage(param);
				}
			},
			getRoleList(){
				sendRequest('/cartonOptimization/getRoleList1','',(data)=>{
					this.roleList = data.obj.roleList;
				})
			},
			updateState(item,state,flag){
				var param;
				if(flag){
                    param = {
						roleNo:item.roleNo,
                        state:state
                    }
					sendRequest('/cartonOptimization/saveRole1',param,(data)=>{
						if(data.code == 200){
							this.webSocketSend(item,state,flag)
                        }else{
							console.log(data.msg);
                        }
                    })
                }
            },
		},
		filters:{
			setStateType:function(state){
				let stateHtml;
				if(state == 1){
					stateHtml = "上钟中"
				}else if(state == 2){
					stateHtml = "轮钟中"
				}else{
					stateHtml = "休息中"
				}
				return stateHtml;
			},
			formatDateFil:function(date){
                return util.formatDate.format(new Date(date),'hh:mm:ss')
			},
		},
	}
</script>